<template>
    <div class="base-progress">
        <div class="inner" :style="{width: w+'%'}">
            <span>{{ w }}</span>
        </div>

    </div>
</template>

<script>
/*props 校验
    思考:组件的 prop 可以乱传么?
    作用:为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 -> 帮助开发者，快速发现错误
    语法:
      1 类型校验 语法
        props: {
            校验的属性名: 类型 // Number string Boolean
        }
      2 非空校验
      3 默认值
      4 自定义校验
        ****************
        完整语法
        props: {
            校验的属性名: {
                type: 类型 // Number string Boolean
                required: true，// 是否必填
                default: 默认值，// 默认值
                validator (value) {
                    // 自定义校验逻辑return 是否通过校验
                }
            }
        }

*/
export default {
    //1 不带任何校验的写法
    //props: ['w'],
    //2 基础写法
    //props: {
    //    w: Number,
    //},
    //3 完整写法
    props: {
        w: {
            type: Number,
            required: true,
            default: 50,
            validator(value) {
                return value>=0 && value <=100
            }
        }
    },
    data() {
        return {
        }
    },
    methods: {
    }
}
</script>

<style scoped>
.base-progress {
    height: 26px;
    width: 400px;
    border-radius: 15px;
    background-color: #272425;
    border: 3px solid #272425;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.inner {
    position: relative;
    background: #379bff;
    border-radius: 15px;
    height: 25px;
    box-sizing: border-box;
    left: -3px;
    top: -2px;
}

.inner span {
    position: absolute;
    right: 0;
    top: 26px;
}
</style>